<template>
  <div class="hello">
    <header>
      <i class="glyphicon glyphicon-envelope ico" id="head-left"></i>
      <span>今日头条 <i class="glyphicon glyphicon-repeat ico"></i></span>

      <router-link tag="i" to="/sou" class="glyphicon glyphicon-search ico" id="head-right"></router-link>
      <div class="iscroll">
        <ul class="isc-ul clear">
          <li>01</li>
          <li>02</li>
          <li>03</li>
          <li>04</li>
          <li>05</li>
          <li>06</li>
          <li>07</li>
          <li>08</li>
          <li>09</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16</li>
          <li>17</li>
          <li>18</li>
          <li>19</li>
          <li>20</li>
          <li>21</li>
          <li>22</li>
        </ul>
      </div>

    </header>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {}
    }
  }
</script>

<style lang="scss">
  @function rem($px) {
    @return $px / 50 + rem
  }

  header {
    width: 100%;

    height: rem(54);
    background: #d63c39;
    text-align: center;
    position: relative;
    & > .ico {
      font-size: rem(35);
      color: #ffffff;
      position: absolute;
      line-height: rem(54);
    }
    #head-left {
      left: rem(10);
    }
    #head-right {
      right: rem(10);
    }
    span {
      font-size: rem(30);
      line-height: rem(54);
      color: #ffffff;
      & > .ico {
        font-size: rem(20);
      }
    }
    .iscroll{
      width: 100%;
      overflow: hidden;
      .isc-ul{
        width: 200%;
      }
    }
    .isc-ul {
      li {
        float: left;
        padding: 0 rem(20);
        font-size: rem(18);
        line-height: rem(48);
      }
    }
  }


</style>
